
<template>
  <div class="like test-1">
    <div v-if="ifEavr" class="like-one">
      <div class="one-kuan-one">
        <img :src="images" alt="" />
      </div>
      <div class="one-kuan-two">
        <div class="text-two">{{ usename }}</div>
        <div class="text-three">
          <button class="atrive-one" @click="quanbu(like)">
            播放全部&nbsp;&nbsp;<van-icon name="plus" />
          </button>
        </div>
      </div>
    </div>
    <div v-if="ifEavr" class="like-two">
      <Jie></Jie><Gequ :Gequ="like"></Gequ>
    </div>
    <div v-if="!ifEavr" class="like-three">请登录</div>
  </div>
</template>

<script>
import Jie from "../components/Jie.vue";
import Gequ from "../components/Gequ.vue";
export default {
  name: "Like",
  components: {
    Jie,
    Gequ,
  },
  data() {
    return {
      id: "",
      activeIndex: 3,
      ifEavr: false,
      usename: "",
      images:
        "https://p1.music.126.net/LybYdNS4KSOzmrrkkmzPZw==/109951165966160218.jpg",
      likeshuju: "1939979974",
      likeshuzu: [],
      like: [],
    };
  },
  created() {
    this.gai();
    this.likeqingqiu();
    this.transformation();
  },
  methods: {
    quanbu(e) {
      this.$store.state.zon = [];
      for (let i = 0; i < e.length; i++) {
        this.axios({
          method: "get",
          url: "/song/detail?ids=" + e[i].id,
        })
          .then((result) => {
            // console.log("result==>", result.data.songs);
            // this.like = result.data.songs;
            this.$store.commit("update", { data: result.data.songs[0] });
          })
          .catch((err) => {
            console.log("err==>", err);
          });
      }
      this.$store.commit("updateTwo", { data: e[0].id });
      this.axios({
        method: "get",
        url: "/song/url?id=" + e[0].id,
      })
        .then((result) => {
          // console.log("result==>", result.data.data[0].url);
          this.$store.commit("updateOne", { data: result.data.data[0].url });
          this.$store.commit("updateL", { data: e[0].name });
          this.$store.commit("updateI", { data:e[0].al.picUrl  });
        })
        .catch((err) => {
          console.log("err==>", err);
        });
      this.axios({
        method: "get",
        url: "/lyric?id=" + e[0].id,
      })
        .then((result) => {
          // console.log("result==>", result.data.lrc.lyric);
          this.$store.commit("updateLyric", { data: result.data.lrc.lyric });
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    gai() {
      setInterval(() => {
        this.ifEavr = this.$store.state.ifEavr;
        this.usename = this.$store.state.name;
        this.likeshuzu = this.$store.state.like;
        this.$store.state.activeIndex = this.activeIndex;
        this.likeqingqiu();
        this.transformation();
      }, 1000);
    },
    likeqingqiu() {
      this.axios({
        method: "get",
        url: "/song/detail?ids=" + this.likeshuju,
      })
        .then((result) => {
          // console.log("result==>", result.data.songs);
          this.like = result.data.songs;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    transformation() {
      this.likeshuzu.forEach((e, i) => {
        this.likeshuju += "," + e;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  // border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #b3b3b3;
}
.test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // border-radius: 10px;
  background: #ededed;
}
.like-three {
  width: 712.5px;
  height: 500px;
  font-size: 18px;
  color: #b3b3b3;
  line-height: 500px;
  text-align: center;
}
.like {
  width: 712.5px;
  height: 500px;
  background-color: rgb(255, 255, 255);
  overflow-y: scroll;
}
.like-one {
  width: calc(100% - 40px);
  height: 180px;
  padding: 20px 20px;
  .one-kuan-one {
    float: left;
    width: 180px;
    height: 180px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }
  .one-kuan-two {
    float: left;
    width: calc(73% - 20px);
    height: 180px;
    padding-left: 20px;
    font-size: 11px;
    color: rgb(63, 63, 63);
    .text-one {
      width: 100%;
      height: 30px;
      font-size: 17px;
      line-height: 30px;
    }
    .text-two {
      width: 100%;
      height: 35px;
      font-size: 20px;
      line-height: 35px;
    }
    .text-three {
      width: 100%;
      height: 50px;
      button {
        width: 100px;
        height: 30px;
        border: 0;
        border-radius: 20px;
        margin-right: 10px;
        margin-top: 10px;
      }
      .atrive-one {
        color: rgb(255, 255, 255);
        background-color: rgb(245, 112, 112);
      }
      .atrive-one:hover {
        background-color: rgb(233, 106, 106);
      }
      .atrive-two {
        border: 1px solid rgb(36, 36, 36);
        background-color: rgb(255, 255, 255);
      }
      .atrive-two:hover {
        background-color: rgb(236, 236, 236);
      }
    }
    .text-four {
      width: 100%;
      height: 25px;
      line-height: 25px;
    }
    .text-five {
      width: 100%;
      height: 25px;
      line-height: 25px;
    }
  }
}
.like-two {
  width: 712.5px;
  height: 500px;
}
</style>